<template>
  <div>
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div id="title">密码重置</div>
        <el-form ref="resetform"
        :model="resetform"
        :rules="rules">

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="email">
                <el-input v-model="resetform.email" prefix-icon="el-icon-lock" placeholder="输入绑定邮箱"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item>
                <el-button 
                :loading="loading" 
                type="primary"
                @click="sendValidationEmail"
                round >发送验证邮件</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="verifyCode">
                <el-input v-model="resetform.verifyCode" prefix-icon="el-icon-lock" placeholder="输入邮箱验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="password">
                <el-input v-model="resetform.password" prefix-icon="el-icon-lock" autocomplete="off" show-password placeholder="输入新密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="checkPass">
                <el-input v-model="resetform.checkPass" prefix-icon="el-icon-lock" autocomplete="off" show-password placeholder="再次输入新密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item>
                <el-button 
                :loading="loading" 
                type="primary"
                @click="reset"
                round >重置密码</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>


import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  name: "reset",
  components: {Footer, Header},
  data() {

    let checkEmail = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请输入邮箱'))
      } else if (!this.checkRemail(value)) {
          callback(new Error('邮箱地址不合法，请重新输入'))
      } else {
          callback()
      }
    }
    let checkVerifycode = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请输入验证码'))
      } else if (value !== this.identifyCode) {
          console.log ('validateVerifycode',value)
          callback(new Error('验证码不正确！'))
      } else {
          callback()
      }
    }    
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"))
      } else {
        if (this.resetform.checkPass !== "") {
          this.$refs.resetform.validateField("checkPass");
        }
        callback()
      }
    }
    // <!--二次验证密码-->
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.resetform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      value: true,
      resetform: {
        email: "",
        verifyCode: "",
        password: "",
        checkPass: ""
      },
      rules: {
        email: [{ validator: checkEmail, message: '', trigger: 'change' }],
        password: [{ validator: validatePass, message:'', trigger: 'change' }],
        checkPass: [{ validator: validatePass2, message:'', trigger: 'change' }],
        verifyCode: [{ validator: checkVerifycode, message:'', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 发送电子验证邮件
    sendValidationEmail(){
      let fd = new FormData();
      fd.append("email",this.resetform.email);

      let config = {
        header: {
          'Content-Type': 'multipart/form=data'
        }
      }

      this.$axios.post("validate/sendValidationEmail",fd,config).then (res => {
        alert(res.data.msg)
        if (res.data.msg === "发送成功") {
          console.log(res.data)
        }
      }).catch( res => {
        alert(res.data)
      })
    },

    // 密码重置
    reset(){
      let fd = new FormData();
      fd.append("verifyCode",this.resetform.verifyCode);
      fd.append("newpasswd",this.resetform.password);
      fd.append("email",this.resetform.email);
      
      let config = {
        header: {
          'Content-Type': 'multipart/form=data'
        }
      }

      this.$axios.post("validate/updatapasswd",fd,config).then (res => {
        alert(res.data.msg)
        if (res.data.msg === "重置成功") {
          this.$router.push({path: '/login'})
          console.log(res.data)
          }
      }).catch( res => {
        alert(res.data)
      })
    },
    // 验证邮箱
    checkRemail(str) {
      let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
  }
}
</script>

<style scoped>
.el-button {
  background: #3A62D7;
  border: #3A62D7;
  width: 100%;
  color: #F5F5F5;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

#title {
  color: #F5F5F5;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 150px;
  margin-bottom: 20px;
}




.s2{    /*s2是我的输入框class*/
}
/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */
  border-radius: 20px; /*输入框圆角值*/
  background-color: rgba(255, 255, 255, 0.35);
  border: rgba(255, 255, 255, 0.35);
  color: #F5F5F5;

}
/deep/ .el-input__prefix {
 color: #F5F5F5;
}



.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background: url("../assets/bg.png") center center no-repeat;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>